<template>
    <div id='' class='detial_view'>
        <img :src="detailSvg" alt="" srcset="">
        <div class="title">专注自然资源信息化</div>
        <div class="tab_view">
            <div v-for="(item,index) in tabList" :key="index" :class="active==item.title?'item active':'item'" @click="onClick(item)"><span>{{item.title}}</span></div>
        </div>
        <div class="content_view">
            <component :is="coms" ref="coms" />
        </div>
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import headerLoge1 from '@/assets/svg/login/login_logo.svg'
// import detailSvg from '@/assets/svg/fontApp/detailView_bg.svg'
import detailSvg from '@/assets/images/header_bg.png'
import InfoShow from './infoShow/index.vue'
import HelpDow from './helpdow/index.vue'
export default {
    name: '',
    props: [''],
    data() {
        return {
            detailSvg: detailSvg,
            active: '',
            coms: null,
            tabList: [
                { title: '信息公开', default: true, coms: InfoShow },
                { title: '帮助文档', default: false, coms: HelpDow }
            ]
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() {
        this.active = this.$route.params.type
        for (let i = 0; i < this.tabList.length; i++) {
            const element = this.tabList[i];
            if (this.active == element.title) {
                this.coms = element.coms;
            }
        }
        this.changeHeader([
            { key: 'bgColor', value: '#fff' },
            { key: 'logoImg', value: headerLoge1 },
        ])
    },
    methods: {
        ...mapActions('extend/header', [
            'changeHeader'
        ]),
        onClick(event) {
            this.active = event.title;
            this.coms = event.coms;
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
.detial_view {
    background: #ffffff;
    position: relative;
    .title {
        font-size: 40px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #ffffff;
        position: absolute;
        top: 140px;
        left: 350px;
    }
    img {
        width: 100%;
        height: 240px;
        margin-top: 80px;
    }
    .tab_view {
        position: absolute;
        top: 265px;
        left: 350px;
        display: flex;
        .item {
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 220px;
            height: 55px;
            background: rgba(255, 255, 255, 0.16);
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            span {
                font-size: 18px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #ffffff;
            }
        }
        .active {
            width: 220px;
            height: 55px;
            background: #ffffff !important;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            span {
                font-size: 18px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #17233d;
            }
        }
    }
    .content_view {
        background: #ffffff;
        padding: 0 350px;
    }
}
</style>